class DuBao {

    //构造
    constructor(header, p) {
        //初始化男声
        let audioKey = webView.getKey();
        //let audioKey = "24.12fd11ff8bdab2f1243c81ac5790bdc4.2592000.1633249472.282335-22983786\n";

        this.show("构造开始: key = " + audioKey);
        //播放速度
        let speed = 4;
        this.nvUrl = "http://tsn.baidu.com/text2audio?cuid=22983786&lan=zh&tok=" + audioKey + "&ctp=1&per=0&spd=" + speed + "&tex=";
        this.nanUrl = "http://tsn.baidu.com/text2audio?cuid=22983786&lan=zh&tok=" + audioKey + "&ctp=1&&per=1&spd=" + speed + "&tex=";
        this._playUrl = this.nanUrl;
        this._btnWidth = 50;
        this._btnHeight = 50;
        this.btnTop = 50;
        this.btnRight = 3;
        this._btnReplaceHeight = 30;

        this._playImg = 'http://image.wenqujingdian.com/m/wq/images/play.png';
        this._stopImg = 'http://image.wenqujingdian.com/m/wq/images/stop.png';
        this._playBtn = document.createElement('img');
        this._playDiv = document.createElement('div');

        //删除原先的缩放元素, 自己添加
        $("[name='viewport']").remove();
        $("head").append('<meta name="viewport" content="user-scalable=yes,target-densitydpi:device-dpi,initial-scale=1.1">');

        $(this._playBtn).attr('src', this._stopImg);
        this._playBtn.onclick = this.playFun.bind(this);
        this._replaceBtn = document.createElement('button');
        this._replaceBtn.onclick = this.changeSound.bind(this);

        //按钮显示条件
        this._isShow = true;
        this._array = [];
        if ($(header).length > 0) {
            this._array.push($(header));
        } else {
            this.show("标题没有获取到");
        }
        this.textColor = $(p[1]).css("color");
        $(p).each((index, element) => {
            if ($(element).text() !== '') {
                this._array.push($(element));
                this.show("push\n" + $(element));
            }
        });
        $(p).bind("click", rawp => {
            $(this._array).each((index, item) => {
                if ($(rawp.target).text() === $(item).text()) {
                    this.play(index);
                }
            });
        });

        //当前播放段落的下标
        this.currentIndex = 0;
        this.audio = new Audio();
        this.audio.onended = () => {
            //判断接下来还有没有要读的,有的话继续
            this.currentIndex++;
            if (this.currentIndex < this._array.length) {
                //说明还有要播放的,继续播放
                this.playItem(this.currentIndex);
            } else {
                //否则停止
                this.stop();
            }
        };

    }

    playFun() {
        if (!this.audio.paused) {
            this.stop();
        } else {
            this.play(0);
        }
    }

    changeSound() {
        this.stop();
        if (this._replaceBtn.innerText === '女声') {
            this._replaceBtn.innerText = '男声';
            this._playUrl = this.nanUrl;
        } else {
            this._replaceBtn.innerText = '女声';
            this._playUrl = this.nvUrl;
        }
        this.play(this.currentIndex);
    }

    start() {
        $(this._playBtn).css("display", "block");
        $(this._playBtn).css("width", this._btnWidth + "px");
        $(this._playBtn).css("height", this._btnHeight + "px");
        $(this._playBtn).css("z-index", 9999);

        $(this._replaceBtn).css("display", "inline");
        $(this._replaceBtn).css("width", this._btnWidth + "px");
        $(this._replaceBtn).css("height", this._btnReplaceHeight + "px");
        $(this._replaceBtn).css("background-color", "transparent");
        this._replaceBtn.innerText = '男声';

        $(this._playDiv).css("position", "fixed");
        $(this._playDiv).css("right", this.btnRight + "vw");
        $(this._playDiv).css("top", this.btnTop + "vh");
        //判断条件是否添加按钮
        if (this._isShow) {
            this.show("show button");
            $('body').append(this._playDiv);
            this._playDiv.append(this._playBtn);
            this._playDiv.append(this._replaceBtn);
            this.play(0);
        }
    }

    show(str) {
        console.log(str);
    }

    clearAllColor() {
        $(this._array).each((index, element) => {
            $(element).css("color", this.textColor);
        });
    }

    stop() {
        //回归所有颜色
        this.clearAllColor();
        $(this._playBtn).attr('src', this._playImg);
        this.audio.pause();
        this.show("stop");
    }

    //播放文字
    play(index) {
        if (this._array.length === 0) {
            return;
        }
        //如果没有播放完毕先调用暂停
        if (!this.audio.ended) {
            this.stop();
        }
        $(this._playBtn).attr('src', this._stopImg);

        //开始播放
        this.currentIndex = index;
        this.playItem(index);
    }

    playItem(index) {
        let text = $(this._array[index]).text().trim();
        if (text.length === 0) {
            this.clearAllColor();
            this.playItem(++this.currentIndex);
            return;
        }
        this.audio.src = this._playUrl + encodeURI(text);
        this.show("playing: " + text);
        this.audio.load();
        this.audio.play();

        $(this._array[index]).css("color", "#ff3333");
        if (index != 0) {
            $(this._array[index - 1]).css("color", this.textColor);
        }
        this.findPos($(this._array[index]));
    }

    findPos(obj) {
        var position = obj.offset();
        position.top = position.top - window.innerHeight / 2;
        $("html,body").animate({scrollTop: position.top}, 500);
    }

}
